<template>
  <div class="home-wrapper">
    <div class="top-card">
      <div class="top-card-item">
        <div class="item-title">
          <span>今日访问量</span
          ><svg t="1701870264652" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4403" width="28" height="28">
            <path d="M186.4 552.9c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z" fill="#BBE4FF" p-id="4404"></path>
            <path
              d="M213.7 572.5c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
              fill="#6D5346"
              p-id="4405"
            ></path>
            <path d="M374.2 376.9c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.8-12.9 34.2 0 51.4z" fill="#BBE4FF" p-id="4406"></path>
            <path
              d="M401.5 396.4c-11.2 0-23-3.9-33.3-11.6l-1.2-0.8-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.3 8.3-19.4 12.4-31.1 12.4z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
              fill="#6D5346"
              p-id="4407"
            ></path>
            <path d="M173.5 662.2h96.4v115.7h-96.4z" fill="#FFF061" p-id="4408"></path>
            <path d="M279.9 787.9H163.5V652.2h116.4v135.7z m-96.4-20h76.4v-95.7h-76.4v95.7z" fill="#6D5346" p-id="4409"></path>
            <path d="M366.3 469.4h96.4v308.5h-96.4z" fill="#FFF061" p-id="4410"></path>
            <path d="M472.7 787.9H356.3V459.4h116.4v328.5z m-96.4-20h76.4V479.4h-76.4v288.5z" fill="#6D5346" p-id="4411"></path>
            <path d="M539.8 565.8h96.4v212.1h-96.4z" fill="#FFF061" p-id="4412"></path>
            <path d="M646.2 787.9H529.8V555.8h116.4v232.1z m-96.4-20h76.4V575.8h-76.4v192.1z" fill="#6D5346" p-id="4413"></path>
            <path d="M732.6 334.4H829v443.4h-96.4z" fill="#FFF061" p-id="4414"></path>
            <path d="M839 787.9H722.6V324.4H839v463.5z m-96.4-20H819V344.4h-76.4v423.5z" fill="#6D5346" p-id="4415"></path>
            <path d="M867.6 777.9H135" fill="#BBE4FF" p-id="4416"></path>
            <path d="M135 767.9h732.6v20H135z" fill="#6D5346" p-id="4417"></path>
            <path d="M572 456.5c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z" fill="#BBE4FF" p-id="4418"></path>
            <path
              d="M599.3 476.1c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
              fill="#6D5346"
              p-id="4419"
            ></path>
            <path d="M764.8 244.4c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z" fill="#BBE4FF" p-id="4420"></path>
            <path
              d="M792.1 264c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z"
              fill="#6D5346"
              p-id="4421"
            ></path>
            <path d="M790.5 218.7" fill="#BBE4FF" p-id="4422"></path>
            <path d="M443.4 353.7l115.7 57.8" fill="#BBE4FF" p-id="4423"></path>
            <path d="M439 362.652l8.945-17.888 115.645 57.823-8.944 17.888z" fill="#6D5346" p-id="4424"></path>
            <path d="M250.6 507.9" fill="#BBE4FF" p-id="4425"></path>
            <path d="M242.6 513.9l16-12z" fill="#6D5346" p-id="4426"></path>
            <path d="M250.6 507.9L366.3 373" fill="#BBE4FF" p-id="4427"></path>
            <path d="M243.097 501.455l115.647-134.927 15.186 13.016L258.283 514.47z" fill="#6D5346" p-id="4428"></path>
            <path d="M624.7 409.6l134.9-173.5" fill="#BBE4FF" p-id="4429"></path>
            <path d="M616.78 403.487l134.935-173.51 15.788 12.278-134.935 173.51z" fill="#6D5346" p-id="4430"></path>
          </svg>
        </div>
        <div class="item-content">
          <div class="content-num">+10000</div>
          <div class="content-desc">
            <span>较昨日新增：1000 </span>
            <br />
            <span>较上周新增：2350 </span>
          </div>
        </div>
        <div class="item-all">
          <span>总访问量 </span>
          <span>1000000</span>
        </div>
      </div>
      <div class="top-card-item">
        <div class="item-title">
          <span>新增用户</span
          ><svg t="1701870365346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7310" width="28" height="28">
            <path d="M525.5 596.2c-156.1 0-282.6 127.7-282.6 285.2h565.2c0-157.5-126.5-285.2-282.6-285.2z" fill="#FCEE21" p-id="7311"></path>
            <path
              d="M491.2 892.8H187.3c-6.3 0-11.4-5.1-11.4-11.4 0-142.9 91.5-267.7 227.8-310.5 6-1.9 12.4 1.4 14.3 7.4 1.9 6-1.5 12.4-7.4 14.3C287.4 631.2 203.5 741.9 198.8 870h292.3c6.3 0 11.4 5.1 11.4 11.4s-5.1 11.4-11.3 11.4z"
              fill="#3E3A39"
              p-id="7312"
            ></path>
            <path
              d="M561.7 272.8c36.5 30.5 59.7 76.4 59.7 127.7 0 92-74.5 166.5-166.5 166.5-19.6 0-38.5-3.4-55.9-9.7 28.9 24.2 66.1 38.8 106.8 38.8 92 0 166.5-74.5 166.5-166.5-0.1-72.3-46.2-133.8-110.6-156.8z"
              fill="#F8B62D"
              p-id="7313"
            ></path>
            <path
              d="M621.4 400.6c0-51.3-23.2-97.2-59.7-127.7-17.5-6.2-36.3-9.7-55.9-9.7-92 0-166.5 74.5-166.5 166.5 0 51.3 23.2 97.2 59.7 127.7 17.5 6.2 36.3 9.7 55.9 9.7 91.9 0 166.5-74.6 166.5-166.5z"
              fill="#FCEE21"
              p-id="7314"
            ></path>
            <path
              d="M491.2 607.5c-106.1 0-192.4-86.3-192.4-192.4 0-25.4 4.9-50.1 14.5-73.4 2.4-5.8 9.1-8.6 14.9-6.2 5.8 2.4 8.6 9.1 6.2 14.9-8.5 20.5-12.8 42.3-12.8 64.7 0 93.6 76.1 169.7 169.7 169.7S661 508.7 661 415.1s-76.1-169.7-169.7-169.7c-37 0-72.1 11.7-101.6 33.8-5 3.8-12.2 2.7-15.9-2.3-3.8-5-2.7-12.2 2.3-15.9 33.5-25.1 73.3-38.3 115.2-38.3 106.1 0 192.4 86.3 192.4 192.4-0.1 106.1-86.4 192.4-192.5 192.4z"
              fill="#3E3A39"
              p-id="7315"
            ></path>
            <path
              d="M340.1 320c-1.9 0-3.7-0.5-5.5-1.4-5.5-3-7.5-9.9-4.5-15.4 3.2-5.8 7.7-11 13-15 5-3.8 12.2-2.7 15.9 2.3 3.8 5 2.7 12.2-2.3 15.9-2.8 2.1-5.1 4.8-6.7 7.8-2 3.7-5.9 5.8-9.9 5.8z"
              fill="#3E3A39"
              p-id="7316"
            ></path>
            <path
              d="M198.5 509.1c-17 0-30.8-13.8-30.8-30.8s13.8-30.8 30.8-30.8 30.8 13.8 30.8 30.8c0 16.9-13.8 30.8-30.8 30.8z m0-46.5c-8.6 0-15.7 7-15.7 15.7 0 8.6 7 15.7 15.7 15.7 8.6 0 15.7-7 15.7-15.7-0.1-8.7-7.1-15.7-15.7-15.7z"
              fill="#47B7F8"
              p-id="7317"
            ></path>
            <path
              d="M174.3 326.8h-13.5v-13.5c0-3.6-2.9-6.5-6.5-6.5s-6.5 2.9-6.5 6.5v13.5h-13.5c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5h13.5v13.5c0 3.6 2.9 6.5 6.5 6.5s6.5-2.9 6.5-6.5v-13.5h13.5c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5zM915.5 327.9H902v-13.5c0-3.6-2.9-6.5-6.5-6.5s-6.5 2.9-6.5 6.5v13.5h-13.5c-3.6 0-6.5 2.9-6.5 6.5s2.9 6.5 6.5 6.5H889v13.5c0 3.6 2.9 6.5 6.5 6.5s6.5-2.9 6.5-6.5v-13.5h13.5c3.6 0 6.5-2.9 6.5-6.5s-2.9-6.5-6.5-6.5z"
              fill="#F7E42F"
              p-id="7318"
            ></path>
            <path
              d="M874.7 463.4H859v-15.7c0-4.2-3.4-7.6-7.6-7.6s-7.6 3.4-7.6 7.6v15.7h-15.7c-4.2 0-7.6 3.4-7.6 7.6s3.4 7.6 7.6 7.6h15.7v15.7c0 4.2 3.4 7.6 7.6 7.6s7.6-3.4 7.6-7.6v-15.7h15.7c4.2 0 7.6-3.4 7.6-7.6s-3.4-7.6-7.6-7.6z"
              fill="#F8B62D"
              p-id="7319"
            ></path>
            <path d="M277 258.2m-11.4 0a11.4 11.4 0 1 0 22.8 0 11.4 11.4 0 1 0-22.8 0Z" fill="#F8B62D" p-id="7320"></path>
            <path d="M785.3 318.2m-15.2 0a15.2 15.2 0 1 0 30.4 0 15.2 15.2 0 1 0-30.4 0Z" fill="#F8B62D" p-id="7321"></path>
            <path d="M689.2 168.4m-15.2 0a15.2 15.2 0 1 0 30.4 0 15.2 15.2 0 1 0-30.4 0Z" fill="#F7E42F" p-id="7322"></path>
            <path
              d="M503.9 175.3c-17 0-30.8-13.8-30.8-30.8s13.8-30.8 30.8-30.8 30.8 13.8 30.8 30.8c0.1 17-13.8 30.8-30.8 30.8z m0-46.5c-8.6 0-15.7 7-15.7 15.7 0 8.6 7 15.7 15.7 15.7s15.7-7 15.7-15.7-7-15.7-15.7-15.7z"
              fill="#F8B62D"
              p-id="7323"
            ></path>
            <path
              d="M322.3 102.3c-1.6-1.6-4.3-1.6-5.9 0-0.8 0.8-1.2 1.9-1.2 3s0.4 2.2 1.2 3l13.5 13.5c0.8 0.8 1.8 1.2 3 1.2 1.1 0 2.2-0.4 3-1.2 1.6-1.6 1.6-4.3 0-5.9l-13.6-13.6zM357.9 137.9c-0.8-0.8-1.8-1.2-3-1.2-1.1 0-2.2 0.4-3 1.2-1.6 1.6-1.6 4.3 0 5.9l13.5 13.5c0.8 0.8 1.8 1.2 3 1.2 1.1 0 2.2-0.4 3-1.2 0.8-0.8 1.2-1.8 1.2-3 0-1.1-0.4-2.2-1.2-3l-13.5-13.4zM354.9 123c1.1 0 2.2-0.4 3-1.2l13.5-13.5c0.8-0.8 1.2-1.8 1.2-3 0-1.1-0.4-2.2-1.2-3-1.6-1.6-4.3-1.6-5.9 0L352 115.8c-1.6 1.6-1.6 4.3 0 5.9 0.7 0.8 1.8 1.3 2.9 1.3zM329.8 137.9l-13.5 13.5c-0.8 0.8-1.2 1.9-1.2 3s0.4 2.2 1.2 3c0.8 0.8 1.8 1.2 3 1.2 1.1 0 2.2-0.4 3-1.2l13.5-13.5c1.6-1.6 1.6-4.3 0-5.9-1.6-1.7-4.4-1.7-6-0.1zM332.4 129.8c0-2.3-1.9-4.2-4.2-4.2h-19.1c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2h19.1c2.4 0 4.2-1.9 4.2-4.2zM378.5 125.6h-19.1c-2.3 0-4.2 1.9-4.2 4.2 0 2.3 1.9 4.2 4.2 4.2h19.1c2.3 0 4.2-1.9 4.2-4.2 0-2.3-1.9-4.2-4.2-4.2zM343.9 90.9c-2.3 0-4.2 1.9-4.2 4.2v19.1c0 2.3 1.9 4.2 4.2 4.2s4.2-1.9 4.2-4.2V95.1c0-2.3-1.9-4.2-4.2-4.2zM343.9 141.2c-2.3 0-4.2 1.9-4.2 4.2v19c0 2.3 1.9 4.2 4.2 4.2s4.2-1.9 4.2-4.2v-19c0-2.3-1.9-4.2-4.2-4.2z"
              fill="#FAEE00"
              p-id="7324"
            ></path>
            <path
              d="M948.1 892.8H921c-6.3 0-11.4-5.1-11.4-11.4S914.8 870 921 870h27.1c6.3 0 11.4 5.1 11.4 11.4s-5.1 11.4-11.4 11.4zM110.5 892.8H75.9c-6.3 0-11.4-5.1-11.4-11.4S69.6 870 75.9 870h34.7c6.3 0 11.4 5.1 11.4 11.4s-5.2 11.4-11.5 11.4z"
              fill="#3E3A39"
              p-id="7325"
            ></path>
            <path d="M877.6 892.8H146.4c-6.3 0-11.4-5.1-11.4-11.4s5.1-11.4 11.4-11.4h731.2c6.3 0 11.4 5.1 11.4 11.4s-5.1 11.4-11.4 11.4z" fill="#3E3A39" p-id="7326"></path>
            <path d="M716.3 778.4m-143.3 0a143.3 143.3 0 1 0 286.6 0 143.3 143.3 0 1 0-286.6 0Z" fill="#FFFFFF" p-id="7327"></path>
            <path
              d="M709.6 933.1c-93.1 0-168.9-75.8-168.9-168.9 0-93.1 75.8-168.9 168.9-168.9S878.5 671 878.5 764.1c0 93.2-75.7 169-168.9 169z m0-315.1c-80.6 0-146.2 65.6-146.2 146.2S629 910.4 709.6 910.4s146.2-65.6 146.2-146.2c0-80.7-65.6-146.2-146.2-146.2z"
              fill="#3E3A39"
              p-id="7328"
            ></path>
            <path
              d="M697.8 845.9c-2.8 0-5.5-1-7.6-2.9l-73.1-65.6c-4.7-4.2-5.1-11.4-0.9-16.1 4.2-4.7 11.4-5.1 16.1-0.9l63.9 57.4 87.3-114.2c3.8-5 11-5.9 15.9-2.1 5 3.8 5.9 11 2.1 15.9l-94.8 123.9c-1.9 2.5-4.8 4.1-8 4.4-0.2 0.2-0.5 0.2-0.9 0.2z"
              fill="#3E3A39"
              p-id="7329"
            ></path>
          </svg>
        </div>
        <div class="item-content">
          <div class="content-num">+500</div>
          <div class="content-desc">
            <span>较昨日新增：170 </span>
            <br />
            <span>较上周新增：1250 </span>
          </div>
        </div>
        <div class="item-all">
          <span>总访问量 </span>
          <span>3000000</span>
        </div>
      </div>
      <div class="top-card-item">
        <div class="item-title">
          <span>当月销售额</span
          ><svg t="1701870470946" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8392" width="28" height="28">
            <path
              d="M129.186559 359.082271A189.997683 189.997683 0 1 1 319.184241 548.783314 190.146002 190.146002 0 0 1 129.186559 359.082271zM505.028969 715.198146A189.997683 189.997683 0 1 1 695.026651 904.750869a190.146002 190.146002 0 0 1-189.997682-189.552723z"
              fill="#FFDA6A"
              p-id="8393"
            ></path>
            <path
              d="M687.61066 926.702202a210.169177 210.169177 0 1 1 12.458865 0 116.431054 116.431054 0 0 1-12.458865 0z m0-27.142526h10.975667a183.026651 183.026651 0 1 0-10.975667 0zM400.463499 889.918888a14.831981 14.831981 0 0 1-9.047508-3.707996 16.611819 16.611819 0 0 1-2.224797-23.137891l16.166859-19.429896h-2.224797a220.254925 220.254925 0 0 1-29.663963 1.928158c-136.15759 1.483198-245.024334-110.646582-219.068366-265.640788a16.611819 16.611819 0 0 1 18.984936-13.497103 16.760139 16.760139 0 0 1 13.645423 18.984936C163.151796 728.546929 270.683662 827.921205 399.276941 811.606025h2.373117l-19.133256-13.793742a16.463499 16.463499 0 1 1 19.281576-26.697567l52.653534 37.673233a16.463499 16.463499 0 0 1 3.114716 23.87949L415.295481 884.282735a16.01854 16.01854 0 0 1-11.123986 5.932792z m292.783314-34.855157a16.463499 16.463499 0 0 1-16.463499-16.463499v-24.769409h-33.816918a16.463499 16.463499 0 1 1 0-32.926999h33.668598v-11.568946h-33.668598a16.463499 16.463499 0 1 1 0-32.926999h33.668598v-14.090382l-63.332561-74.159907a16.760139 16.760139 0 0 1 1.928158-23.286211 16.463499 16.463499 0 0 1 23.286211 1.928158l55.323291 65.260718 54.730011-65.260718a16.463499 16.463499 0 0 1 25.214369 21.209733l-64.22248 76.533024v12.310545h33.816918a16.463499 16.463499 0 1 1 0 32.926999h-33.816918v11.568945h33.816918a16.463499 16.463499 0 1 1 0 32.926999h-33.816918v25.066049a16.463499 16.463499 0 0 1-16.463499 16.01854z m-132.449594-161.668598a13.348783 13.348783 0 0 1-13.348783-13.645423c0-54.285052 56.658169-109.163384 108.570104-105.307068a13.645423 13.645423 0 1 1-2.224797 27.142526c-34.706837-2.669757-78.757822 38.563152-79.202781 78.312862a13.645423 13.645423 0 0 1-13.793743 13.497103zM311.471611 569.103129a200.973349 200.973349 0 1 1 12.310544 0c-3.707995 0.14832-7.71263 0.14832-12.310544 0z m0-24.02781a90.326767 90.326767 0 0 0 10.975666 0 179.763615 179.763615 0 1 0-10.975666 0z m512-44.495945h-3.411356a16.611819 16.611819 0 0 1-13.497103-18.984936c24.02781-143.128621-83.800695-242.502897-212.245655-226.039397h-2.669757l19.281576 13.793742a16.463499 16.463499 0 0 1-10.085747 29.663963 14.831981 14.831981 0 0 1-9.195829-3.114716l-51.763615-38.118192a16.463499 16.463499 0 0 1-3.114716-23.87949l43.012746-52.060255a16.463499 16.463499 0 0 1 23.286211-2.076478 16.31518 16.31518 0 0 1 2.076478 23.137891L589.274623 222.479722h2.076478c148.319815-18.688297 276.468134 98.187717 248.584009 264.30591a16.31518 16.31518 0 0 1-15.57358 13.200463z m-504.28737-18.539977a11.420626 11.420626 0 0 1-11.568946-11.420625v-8.60255l-22.099652-5.339513a109.904983 109.904983 0 0 1-22.099652-11.717265 12.755504 12.755504 0 1 1 13.942062-21.506373 74.159907 74.159907 0 0 0 16.01854 8.157589l14.831982 4.004635v-62.146002l-13.497103-5.932792a78.461182 78.461182 0 0 1-13.497104-8.30591 50.280417 50.280417 0 0 1 21.358054-89.881808l5.636153-1.186558v-11.568946a11.568946 11.568946 0 0 1 22.989571 0v11.568946l21.061414 5.784473a84.838934 84.838934 0 0 1 21.951332 13.793742 12.755504 12.755504 0 0 1 1.483198 17.946698 12.903824 12.903824 0 0 1-18.095017 1.483198 57.399768 57.399768 0 0 0-13.942063-9.047509l-12.755504-4.004635v60.662805a143.425261 143.425261 0 0 1 32.33372 14.831981A43.161066 43.161066 0 0 1 385.631518 406.544612a53.543453 53.543453 0 0 1-45.682503 54.136732l-8.30591 1.186559v8.157589a11.420626 11.420626 0 0 1-12.013905 11.420626z m11.420626-45.237543h3.114716a28.180765 28.180765 0 0 0 25.214368-29.663963 17.501738 17.501738 0 0 0-9.640788-15.87022 74.159907 74.159907 0 0 0-9.789107-5.339513l-8.899189-3.411356z m-22.544612-91.216686v-51.318656l-9.047509 3.559676a22.247972 22.247972 0 0 0-12.755504 19.726535 25.066049 25.066049 0 0 0 10.382387 21.506373l11.272306 6.526072z m-121.770568-12.458864a11.865585 11.865585 0 0 1-11.865585-12.162225c0-53.395133 56.06489-107.531866 106.938586-103.82387a12.013905 12.013905 0 0 1-1.928157 24.02781c-35.596756-2.818076-80.537659 39.304751-80.982619 79.94438a11.865585 11.865585 0 0 1-12.162225 12.013905z"
              fill="#333333"
              p-id="8394"
            ></path>
          </svg>
        </div>
        <div class="item-content">
          <div class="content-num" style="margin-bottom: 30px">50000</div>
          <div class="content-desc">
            <el-progress :percentage="80" />
          </div>
        </div>
        <div class="item-all">
          <span>累计销售额 </span>
          <span>800000</span>
        </div>
      </div>
      <div class="top-card-item">
        <div class="item-title">
          <span>当月订单量</span
          ><svg t="1701870627604" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10056" width="28" height="28">
            <path d="M170.666667 785.066667a341.333333 74.666667 0 1 0 682.666666 0 341.333333 74.666667 0 1 0-682.666666 0Z" fill="#F3E4DB" p-id="10057"></path>
            <path d="M512 435.2l298.666667-142.933333-298.666667-128-298.666667 128z" fill="#EB883A" p-id="10058"></path>
            <path d="M507.733333 834.133333L810.666667 676.266667v-384l-302.933334 138.666666z" fill="#EB883A" p-id="10059"></path>
            <path d="M516.266667 834.133333L213.333333 676.266667v-384l302.933334 138.666666z" fill="#EBCB4B" p-id="10060"></path>
            <path
              d="M437.333333 294.4c0-12.8 8.533333-21.333333 21.333334-21.333333h106.666666c12.8 0 21.333333 8.533333 21.333334 21.333333s-8.533333 21.333333-21.333334 21.333333h-106.666666c-12.8 0-21.333333-8.533333-21.333334-21.333333z"
              fill="#FFFFFF"
              p-id="10061"
            ></path>
          </svg>
        </div>
        <div class="item-content">
          <div class="content-num">180</div>
          <div class="content-desc">
            <span>较昨日新增：20 </span>
            <br />
            <span>较上周新增：150 </span>
          </div>
        </div>
        <div class="item-all">
          <span>累计订单量 </span>
          <span>10000</span>
        </div>
      </div>
    </div>
    <div class="main-card">
      <div class="main-crad-chart" id="main-crad-chart"></div>
    </div>
    <div class="bottom-card">
      <div class="bottom-card-item">
        <div class="item-title">
          <span>一周销售额（单位：万）</span>
        </div>
        <div class="item-content">
          <div class="bottom-crad-chart1" id="bottom-crad-chart1"></div>
        </div>
      </div>
      <div class="bottom-card-item">
        <div class="item-title">
          <span>半年招生对比图（单位：人）</span>
        </div>
        <div class="item-content">
          <div class="bottom-crad-chart2" id="bottom-crad-chart2"></div>
        </div>
      </div>
      <div class="bottom-card-item">
        <div class="item-title">
          <span>招生渠道分析图</span>
        </div>
        <div class="item-content">
          <div class="bottom-crad-chart3" id="bottom-crad-chart3"></div>
        </div>
      </div>
      <div class="bottom-card-item">
        <div class="item-title">
          <span>公司各部门人员数量</span>
        </div>
        <div class="item-content">
          <div class="bottom-crad-chart4" id="bottom-crad-chart4"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import aLink from '@/components/common/aLink.vue'
import { ref } from 'vue'
// 引入echarts
import * as echarts from 'echarts'

//初始化图表方法
const initChart = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('main-crad-chart'))
  const months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  const option = {
    color: ['rgba(110, 199, 205)', 'rgba(211, 58, 192)'],
    grid: {
      top: '10%',
      left: '2%',
      right: '2%',
      bottom: '5%',
      containLabel: true,
    },
    legend: {
      data: ['2019全年销售额', '2020全年销售额'],
      top: '2%',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: months,
      boundaryGap: false,
      splitLine: { show: false },
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'line',
        name: '2019全年销售额',
        stack: '总量',
        data: [80, 60, 55, 99, 103, 110, 97, 87, 65, 120, 105, 115],
        smooth: true,
        lineStyle: {
          color: 'rgba(110, 199, 205)',
        },
        label: {
          show: true,
          formatter(val) {
            if (val.dataIndex === 0) {
              return ''
            } else {
              return val.data
            }
          },
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(234, 228, 201)',
            },
            {
              offset: 1,
              color: 'rgba(110, 199, 205)',
            },
          ]),
        },
      },
      {
        type: 'line',
        name: '2020全年销售额',
        stack: '总量',
        data: [90, 70, 50, 93, 88, 96, 83, 75, 90, 110, 98, 100],
        smooth: true,
        lineStyle: {
          color: 'rgba(211, 58, 192)',
        },
        label: {
          show: true,
          formatter(val) {
            if (val.dataIndex === 0) {
              return ''
            } else {
              return val.data
            }
          },
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(240, 188, 136)',
            },
            {
              offset: 1,
              color: 'rgba(211, 58, 192)',
            },
          ]),
        },
      },
    ],
  }
  myChart.setOption(option)
}
const initChart1 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('bottom-crad-chart1'))
  const option = {
    grid: {
      left: '2%',
      right: '5%',
      top: '5%',
      bottom: '3%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
      boundaryGap: false,
      splitLine: { show: false },
    },
    yAxis: {
      type: 'value',
      boundaryGap: false,
      splitLine: { show: false },
    },
    series: [
      {
        data: [150, 180, 224, 218, 200, 180, 150],
        type: 'line',
        smooth: true,
        showSymbol: false,
        lineStyle: {
          width: 0,
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(55, 162, 255)',
            },
            {
              offset: 1,
              color: 'rgba(116, 21, 219)',
            },
          ]),
        },
      },
    ],
  }
  myChart.setOption(option)
}
const initChart2 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('bottom-crad-chart2'))
  const option = {
    grid: {
      left: '2%',
      right: '5%',
      top: '10%',
      bottom: '3%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    yAxis: {
      type: 'category',
      data: ['一月', '二月', '三月', '四月', '五月', '六月'],
      boundaryGap: 0,
      axisTick: {
        show: false,
      },
    },
    xAxis: {
      type: 'value',
      boundaryGap: 0,
    },
    series: [
      {
        data: [480, 289, 711, 618, 393, 571, 470],
        type: 'bar',
        smooth: true,
        showSymbol: false,
        barWidth: 'auto',
        itemStyle: {
          borderRadius: [0, 15, 15, 0],
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(12, 124, 182)',
            },
            {
              offset: 1,
              color: 'rgba(244, 187, 236)',
            },
          ]),
        },
      },
    ],
  }
  myChart.setOption(option)
}
const initChart3 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('bottom-crad-chart3'))
  const option = {
    grid: {
      left: '12%',
      right: '5%',
      top: '5%',
      bottom: '3%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: true,
          length: 5,
          length2: 5,
          smooth: true,
        },
        data: [
          { value: 1969, name: '线上' },
          { value: 743, name: '互推' },
          { value: 1594, name: '电话' },
          { value: 1347, name: '地推' },
          { value: 635, name: '直播' },
        ],
      },
    ],
  }
  myChart.setOption(option)
}
const initChart4 = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('bottom-crad-chart4'))
  const option = {
    tooltip: {
      trigger: 'item',
    },
    radar: {
      name: {
        textStyle: {
          color: '#333',
          fontSize: 10,
          backgroundColor: '#f5f5f5',
          borderRadius: 3,
          padding: [3, 5],
        },
      },
      indicator: [
        { name: '销售', max: 50 },
        { name: '管理', max: 5 },
        { name: '技术', max: 4 },
        { name: '客服', max: 3 },
        { name: '人资', max: 5 },
        { name: '运营', max: 10 },
      ],
      radius: 60,
      nameGap: 8,
    },
    series: [
      {
        name: '公司部门人员配备',
        type: 'radar',
        data: [
          {
            value: [30, 3, 4, 3, 5, 8],
            itemStyle: {
              color: '#a8efeb',
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(234, 214, 238, 1)',
                },
                {
                  offset: 1,
                  color: 'rgba(168, 239, 235, 1)',
                },
              ]),
            },
          },
        ],
      },
    ],
  }
  myChart.setOption(option)
}
setTimeout(() => {
  initChart()
  initChart1()
  initChart2()
  initChart3()
  initChart4()
}, 1000)
</script>
<style lang="scss" scoped>
.home-wrapper {
  background: $color-3;
  .top-card {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .top-card-item {
      width: 22%;
      height: 190px;
      background: #fff;
      border-radius: 3px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .item-title {
        width: 100%;
        height: 36px;
        border-bottom: 1px solid rgb(229, 231, 235);
        line-height: 36px;
        font-size: 14px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        svg {
          margin-top: 5px;
        }
      }
      .item-content {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: 0 10px;
        .content-num {
          font-size: 28px;
          margin-bottom: 5px;
        }
      }
      .item-all {
        width: 100%;
        height: 36px;
        border-top: 1px solid rgb(229, 231, 235);
        line-height: 36px;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
      }
    }
  }
  .main-card {
    height: 410px;
    width: 100%;
    margin-top: 20px;
    .main-crad-chart {
      width: 100%;
      height: 100%;
      background: #fff;
    }
  }
  .bottom-card {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    .bottom-card-item {
      width: 22%;
      height: 190px;
      background: #fff;
      border-radius: 3px;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .item-title {
        width: 100%;
        height: 36px;
        border-bottom: 1px solid rgb(229, 231, 235);
        line-height: 36px;
        font-size: 14px;
        padding: 0 10px;
      }
      .item-content {
        width: 100%;
        height: 100%;
        .bottom-crad-chart1 {
          width: 100%;
          height: 100%;
        }
        .bottom-crad-chart2 {
          width: 100%;
          height: 100%;
        }
        .bottom-crad-chart3 {
          width: 100%;
          height: 100%;
        }
        .bottom-crad-chart4 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
